<template>
  <div
    style="height: 100%"
    ref="homePieRef"
  ></div>
</template>
<script setup lang="ts">
import { markRaw, nextTick, onActivated, onMounted, reactive, ref, watch } from "vue";
import { storeToRefs } from "pinia";
import * as echarts from "echarts";
import { useThemeConfig } from "@/stores/themeConfig";
import { useTagsViewRoutes } from "@/stores/tagsViewRoutes";
import { getFormDeviceCountReq } from "@/api/mannage/analysis";
import { i18n } from "@/i18n";
import { ChartStateType } from "./types";

const homePieRef = ref();
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const storesTagsViewRoutes = useTagsViewRoutes();
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);

// 监听 pinia 中是否开启深色主题
watch(
  () => themeConfig.value.isIsDark,
  isIsDark => {
    nextTick(() => {
      state.charts.theme = isIsDark ? "dark" : "";
      state.charts.bgColor = isIsDark ? "transparent" : "";
      state.charts.color = isIsDark ? "#dadada" : "#303133";
      setTimeout(() => {
        initPieChart();
        ``;
      }, 500);
    });
  },
  {
    deep: true,
    immediate: true
  }
);

// 批量设置 echarts resize
const initEchartsResizeFun = () => {
  nextTick(() => {
    state.myChart!.resize();
  });
};
// 批量设置 echarts resize
const initEchartsResize = () => {
  window.addEventListener("resize", initEchartsResizeFun);
};
// 页面加载时
onMounted(async () => {
  // 加载数据
  try {
    const res = await getFormDeviceCountReq();
    option.legend.data = res.data.map(item => item.name || i18n.global.t("system.home.other"));
    option.series[0].data = res.data.map(item => {
      return {
        name: item.name || i18n.global.t("system.home.other"),
        value: item.count || 0
      };
    });
  } catch (e) {
    console.log(e);
  }
  initEchartsResize();
});
// 由于页面缓存原因，keep-alive
onActivated(() => {
  initEchartsResizeFun();
});
// 监听 pinia 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
watch(
  () => isTagsViewCurrenFull.value,
  () => {
    initEchartsResizeFun();
  }
);
const state = reactive<ChartStateType>({
  global: {
    homeChart: null,
    disposeChart: null
  },
  myChart: null,
  charts: {
    theme: "",
    bgColor: "",
    color: "#303133"
  }
});
const colorList = ["#968AF5", "#E790E8", "#51A3FC", "#36C78B", "#FEC279", "#f9e264", "#f47a75", "#009db2"];

const option: any = {
  backgroundColor: state.charts.bgColor,
  title: {
    text: i18n.global.t("system.home.system"),
    x: "left",
    textStyle: { fontSize: "15", color: state.charts.color }
  },
  tooltip: { trigger: "item", formatter: "{b} <br/> {c}" },
  graphic: {
    elements: [
      {
        type: "image",
        z: -1,
        style: {
          image: themeConfig.value.isIsDark
            ? ""
            : "",
          width: 230,
          height: 230
        },
        left: "16.5%",
        top: "center"
      }
    ]
  },
  legend: {
    type: "scroll",
    orient: "vertical",
    right: "0%",
    left: "65%",
    top: "center",
    itemWidth: 14,
    itemHeight: 14,
    data: [],
    textStyle: {
      rich: {
        name: {
          fontSize: 14,
          fontWeight: 400,
          width: 200,
          height: 35,
          padding: [0, 0, 0, 60],
          color: state.charts.color
        },
        rate: {
          fontSize: 15,
          fontWeight: 500,
          height: 35,
          width: 40,
          padding: [0, 0, 0, 30],
          color: state.charts.color
        }
      }
    }
  },
  series: [
    {
      type: "pie",
      radius: ["82", themeConfig.value.isIsDark ? "50" : "102"],
      center: ["32%", "50%"],
      itemStyle: {
        color: function (params: any) {
          return colorList[params.dataIndex];
        }
      },
      label: { show: false },
      labelLine: { show: false },
      data: []
    }
  ]
};
const initPieChart = () => {
  // if (!state.global.dispose.some((b: any) => b === state.global.homeChartTwo)) state.global.homeChartTwo.dispose();
  state.global.homeChart = markRaw(echarts.init(homePieRef.value, state.charts.theme));
  state.global.homeChart.setOption(option);
  state.myChart = state.global.homeChart;
};
</script>

<style scoped lang="scss"></style>
